<template>
    <div>
        <!-- 装备栏 -->
        <!-- <ul class="absolute bottom-0 left-1/2 -translate-x-1/2 flex gap-1">
            <li class="w-10 h-10 border-2 border-blue-400 grid place-items-center bg-[rgba(0,0,0,0.2)]">
                <div class="w-3/4 h-3/4 rounded-full bg-[#dede8d]"></div>
            </li>
            <li class="w-10 h-10 border-2 bg-[rgba(0,0,0,0.2)]"></li>
            <li class="w-10 h-10 border-2 bg-[rgba(0,0,0,0.2)]"></li>
            <li class="w-10 h-10 border-2 bg-[rgba(0,0,0,0.2)]"></li>
            <li class="w-10 h-10 border-2 bg-[rgba(0,0,0,0.2)]"></li>
            <li class="w-10 h-10 border-2 bg-[rgba(0,0,0,0.2)]"></li>
        </ul> -->
        <!-- 角色卡片 -->
        <div
            class="select-none px-3 w-[26rem] h-32 rounded-tr-md rounded-br-md absolute left-0 flex items-center shadow-md shadow-slate-500 overflow-hidden">
            <img src="../assets/icon/卡片背景.png" alt="" class="absolute object-cover blur-sm w-full h-full top-0 left-0">
            <img src="../assets/imgs/avatar.jpg" class="rounded-full w-32 h-32 p-2 z-10" alt="">
            <div class="m-auto z-10">
                <div class="name w-80 h-10 bg-[rgba(255,255,255,0.5)] grid place-items-center">
                    <p class="mr-16 font-mono">呆呆鱼🐟</p>
                </div>
                <div class="mt-3 flex items-center justify-between gap-5 w-64">
                    <div style="filter: drop-shadow(0 0 10px skyBlue);" class="flex flex-col gap-1 justify-center items-center hover:scale-110 duration-200
                        cursor-pointer">
                        <img src="../assets/icon/商店.png" @click="showName(`good`)" alt="">
                        <p
                            class="tracking-widest border border-white-500 bg-white/50 px-2 text-xs rounded-sm font-mono">
                            商店</p>
                    </div>
                    <div style="filter: drop-shadow(0 0 10px skyBlue);"
                        class="flex flex-col gap-1 justify-center items-center hover:scale-110 duration-200 cursor-pointer">
                        <img src="../assets/icon/个人信息.png" @click="showName(`role`)" alt="">
                        <p
                            class="tracking-widest border border-white-500 bg-white/50 px-2 text-xs rounded-sm font-mono">
                            个人</p>
                    </div>
                    <div style="filter: drop-shadow(0 0 10px skyBlue);"
                        class="flex flex-col gap-1 justify-center items-center hover:scale-110 duration-200 cursor-pointer">
                        <img src="../assets/icon/邮件.png" @click="showName(`mail`)" alt="">
                        <p
                            class="tracking-widest border border-white-500 bg-white/50 px-2 text-xs rounded-sm font-mono">
                            邮件</p>
                    </div>
                    <div style="filter: drop-shadow(0 0 10px skyBlue);"
                        class="flex flex-col gap-1 justify-center items-center hover:scale-110 duration-200 cursor-pointer">
                        <img src="../assets/icon/背包.png" @click="showName(`bag`)" alt="">
                        <p
                            class="tracking-widest border border-white-500 bg-white/50 px-2 text-xs rounded-sm font-mono">
                            背包</p>
                    </div>
                </div>
            </div>
        </div>
        <Mailbox v-if="showMail" @showName="showName('mail')" class="z-50"></Mailbox>
        <RoleInfo v-if="showRole" @showName="showName('role')" class="z-50"></RoleInfo>
        <Goods v-if="showGood" @showName="showName('good')" class="z-50"></Goods>
        <Bag v-if="showBag" @showName="showName('bag')" class="z-50"></Bag>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const showMail = ref(false)
const showRole = ref(false)
const showGood = ref(false)
const showBag = ref(false)

const showName = (name: string) => {
    switch (name) {
        case 'mail':
            showMail.value = !showMail.value
            break;
        case 'role':
            showRole.value = !showRole.value
            break;
        case 'good':
            showGood.value = !showGood.value
            break;
        case 'bag':
            showBag.value = !showBag.value
            break;
    }
}
</script>

<style scoped>
.info_card {
    background: url('../assets/icon/卡片背景.png') no-repeat;
    background-size: cover;
    background-position: center;
}

:deep(.el-rate__item) {
    margin: 0 1px;
}

.name {
    clip-path: polygon(75% 0%, 80% 50%, 75% 100%, 0% 100%, 5% 50%, 0% 0%);
}
</style>
